<template>
	<view style="position: relative;">
		<!-- 轮播图 -->
		<swiper v-if="pics && pics.length" class="images-view" :indicator-dots="true" indicator-active-color="#FFFFFF"
		 :autoplay="true" :interval="3000" :duration="300">
			<swiper-item v-for="(item, index) in pics" :key="index" v-if="item.length">
				<image class="swiper-item" :src="item" alt="商品图片" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 商品介绍 -->
		<view class="product-info-view">
			<view class="price-view util-font-medium">
				<view class="price-icon">￥</view>
				<view class="price-text">{{data.price/100.}}</view>
				<!-- <view class="price-brokerage">返佣{{data.commission/100.}}元</view> -->
				<view v-if="userInfo && userInfo.type == 1" class="price-brokerage">返佣{{data.merProductCommission.littleExpert/100.0}}元</view>
				<view v-else-if="userInfo && userInfo.type == 2" class="price-brokerage">返佣{{data.merProductCommission.bigExpert/100.0}}元</view>
			</view>
			<view class="price-original util-font-regular">￥{{data.originalPrice/100.}}</view>
			<view class="sell-number">已售{{data.sellNumber?data.sellNumber:0}}件</view>
			<view class="product-intro-view">
				<image class="intro-image" src="../../static/index/tuan.png" mode="aspectFit"></image>
				<text class="intro-text util-font-medium">{{data.name}}</text>
			</view>
		</view>
		<!-- 使用须知 -->
		<view class="use-notice-view">
			<view class="use-notice-title util-font-medium">
				使用须知
			</view>
			<!-- <rich-text class="use-notice-rich-text" :nodes="html1"></rich-text> -->
			<u-parse class="use-notice-rich-text" :content="html1"></u-parse>
		</view>
		<!-- 商户信息 -->
		<view class="use-notice-view">
			<view class="use-notice-title util-font-medium">
				商户信息
			</view>
			<view class="mer-info-view" @click="merchant">
				<image class="mer-info-image" :src="data.merMerchant.pic" mode="aspectFill"></image>
				<view class="mer-info-text-view">
					<view class="mer-name util-font-medium">{{data.merMerchant.name}}</view>
					<view class="mer-info-info util-font-regular">
						<image class="mer-info-star-image" src="../../static/index/star.png" mode="aspectFit"></image>
						<view class="mer-info-star-text">{{data.merMerchant.score}}</view>
						<view class="mer-info-consume">人均￥{{data.merMerchant.consume}}</view>
						<view class="mer-info-type">{{data.merMerchant.type}}</view>
						<!-- <view class="mer-info-type2">附近美食</view> -->
					</view>
					<image class="mer-info-icon" src="../../static/index/tuan.png" mode="aspectFit"></image>
				</view>
				<view class="mer-phone-view" @click="merPhone">
					<view class="mer-phone-content">
						<view class="mer-phone-title util-font-regular">预约电话</view>
						<image class="mer-phone-image" src="../../static/index/phone.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="mer-address" @click="merAddress">
				<image class="mer-address-image" src="../../static/index/icon_address.png" mode="aspectFit"></image>
				<text v-if="data" class="mer-address-text util-font-regular">{{getDistance(userLocation.latitude, userLocation.longitude, data.merMerchant.lat, data.merMerchant.lng)}}</text>
				<text class="mer-address-text util-font-regular" style="margin-left: 15upx;">{{data.merMerchant.address}}</text>
			</view>
		</view>
		<!-- 商品介绍 -->
		<view class="use-notice-view">
			<view class="use-notice-title util-font-medium">
				商品介绍
			</view>
			<u-parse class="use-notice-rich-text" :content="html2"></u-parse>
		</view>
		<!-- 占位 -->
		<view class="placeholder-view">

		</view>
		<!-- 底部view -->
		<view class="footer-view">
			<view class="footer-share-view util-font-semibold" @click="share">
				<view class="footer-share-text" v-if="userInfo && userInfo.type != 0">
					<text style="font-size: 32rpx;">分享赚</text>
					<text style="font-size: 24rpx;">￥</text>
					<text v-if="userInfo && userInfo.type == 1">
						<text style="font-size: 44rpx;position: relative;top: 3rpx;">{{((data.merProductCommission.littleExpert/100.0)+'').split('.')[0]}}</text>
						<text style="font-size: 24rpx;">.</text>
						<text v-if="data.merProductCommission.littleExpert%100 == 0" style="font-size: 24rpx;">0</text>
						<text v-else style="font-size: 24rpx;">{{((data.merProductCommission.littleExpert/100.0)+'').split('.')[1]}}</text>
					</text>
					<text v-else>
						<text style="font-size: 44rpx;position: relative;top: 3rpx;">{{((data.merProductCommission.bigExpert/100.0)+'').split('.')[0]}}</text>
						<text style="font-size: 24rpx;">.</text>
						<text v-if="data.merProductCommission.bigExpert%100 == 0" style="font-size: 24rpx;">0</text>
						<text v-else style="font-size: 24rpx;">{{((data.merProductCommission.bigExpert/100.0)+'').split('.')[1]}}</text>
					</text>
				</view>
				<view v-else class="footer-share-text" style="margin-top: 22rpx;">
					<text style="font-size: 32rpx;">分享给好友</text>
				</view>
			</view>
			<view class="footer-confirm-button util-font-medium" @click="confirm">
				<view class="footer-confirm-text">
					<text style="font-size: 32rpx;">限时抢购</text>
					<text style="font-size: 24rpx;margin-left: 10rpx;">{{time}}</text>
				</view>
			</view>
		</view>

		<view class="navBar" :style="{top: statusBarHeight}">
			<image class="navBar-back" src="../../static/navBar/navBar_back.png" mode="aspectFit" @click="goBack"></image>
			<view class="navBar-line"></view>
			<image class="navBar-main" src="../../static/navBar/navBar_main.png" mode="aspectFit" @click="goMain"></image>
		</view>

		<!-- 弹出层 -->
		<uni-popup class="popUp" ref="popUp" type="center" animation="false" @change="popUpChanged">
			<view class="popUp-mask-view" style="text-align: center;">
				<image class="popUp-image-view" :src="shareImageUrl" mode="aspectFit"></image>
				<view class="popUp-button-view">
					<button class="popUp-button-view-item" style="float: left;" open-type="share">
						<image class="popUp-button-view-item-image" src="../../static/index/wechat.png" mode="aspectFit"></image>
						<view class="popUp-button-view-item-title util-font-medium">推荐给好友</view>
					</button>
					<view class="popUp-button-view-item" style="float: right;" @click="saveImage">
						<image class="popUp-button-view-item-image" src="../../static/index/save_to_image.png" mode="aspectFit"></image>
						<view class="popUp-button-view-item-title util-font-medium">保存海报</view>
					</view>
				
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPop from "@/components/uni-popup/uni-popup.vue"

	export default {
		components: {
			uniPop
		},
		computed: {
			statusBarHeight() {
				return this.$util.systemRect().statusBarHeight + 'px'
			},
			screenWidth() {
				return this.$util.systemRect().screenWidth + 'px'
			},
			screenHeight() {
				return this.$util.systemRect().screenHeight + 'px'
			}
		},
		data() {
			return {
				userLocation: null,
				userInfo: null,
				
				data: null,
				pics: [],
				html1: '',
				html2: '',
				
				shareUserId: null,
				shareProductId: null,
				shareImageUrl: null,
				
				timer: null,
				time: '',
				
				// noticeForUse: '<p><span style="font-size: 12px; background-color: rgb(255, 255, 255); color: rgb(191, 191, 191); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;">有效期</span></p><p><span style="color: rgb(165, 165, 165); font-size: 12px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;">·2020-07-17至2020-08-17</span></p><p><span style="font-size: 12px; background-color: rgb(255, 255, 255); color: rgb(191, 191, 191); font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;">使用时间</span></p><p><span style="color: rgb(165, 165, 165); font-size: 12px; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;;">·上午8:30-11:00，下午13:00-18:00</span></p>'

			}
		},
		onLoad(options) {
			
			// 获取可能存在的 IUID 或 PUID
			if (options.scene) {
				this.shareUserId = this.$util.JSDecode(decodeURIComponent(options.scene)).SUID
				this.shareProductId = this.$util.JSDecode(decodeURIComponent(options.scene)).SPID
			}
			if (options.uid) {
				this.shareUserId = options.uid
			}
			if (options.pid) {
				this.shareProductId = options.pid
			}
			
			// 如果 shareUserId 存在,则暂存
			if (this.shareUserId) {
				uni.setStorageSync('shareUserId', this.shareUserId)
			}
			
			var that = this
			uni.$on('loginSuccess', function(){
				that.userInfo = uni.getStorageSync('userInfo')
				console.log('1 === ' + that.shareUserId)
				if (that.shareUserId) {
					that.bindShareUser()
				}
				that.getShareImageUrl()
			})
			uni.$on('getPhoneNumberSuccess', function(){
				that.userInfo = uni.getStorageSync('userInfo')
			})
			
			if (this.shareUserId) {
				console.log('2 === ' + that.shareUserId)
				this.reg()
			}
			
			this.userInfo = uni.getStorageSync('userInfo')
			this.userLocation = uni.getStorageSync('userLocation')
			
			this.loadData()
		},
		methods: {
			getShareImageUrl: function(){
				
				if (!this.data){
					return ''
				}
				
				var shareData = {}
				if (this.isLogin()) {
					shareData = this.$util.JSEncode(JSON.stringify({SUID:this.userInfo.id,SPID:this.shareProductId}))
					this.shareImageUrl = this.$baseUrl + 'app/appBanner/proPoster/' + uni.getStorageSync('appId') + '?' + encodeURI('scene=' + shareData + '&url=' + this.data.billPic + '&headimgUrl=' + this.userInfo.headimgurl)
				}else{
					shareData = this.$util.JSEncode(JSON.stringify({SPID:this.shareProductId}))
					this.shareImageUrl = this.$baseUrl + 'app/appBanner/proPoster/' + uni.getStorageSync('appId') + '?' + encodeURI('scene=' + shareData + '&url=' + this.data.billPic + '&headimgUrl=https://tanmyan.oss-cn-zhangjiakou.aliyuncs.com/web/logo_144.png')
				}
				console.log(shareData)
				
			},
			bindShareUser: function(){
				var that = this
				console.log('3 === ' + that.shareUserId)
				that.sendRequest({
					url: 'app/appUser/bindShareUser',
					method: 'POST',
					header: that.$urlRequest.getHeader('token','json'),
					data: {
						userId: that.userInfo.id,
						shareUserId: that.shareUserId
					},
					success: function(res){
						console.log('bindShareUser = ' + res)
					}
				})
			},
			loadData: function() {

				var that = this
				that.sendRequest({
					url: 'app/merProduct/info/' + that.shareProductId,
					method: "POST",
					header: that.$urlRequest.getHeader('void'),
					success: function(res) {
						that.data = res.data.data
						that.pics = that.data.pics.split(",")

						that.html1 = that.formatHtml(that.data.notice)
						that.html2 = that.formatHtml(that.data.intro)
						
						that.timer = setInterval(function(){
							that.getTimeList()
						}, 200)
						
						console.log(((that.data.merProductCommission.bigExpert/100.0)+'').split('.')[0])
						console.log(((that.data.merProductCommission.bigExpert/100.0)+'').split('.')[1])
					}
				})
			},
			getTimeList: function() {
				
				var that = this
				var item = that.data
				
				var finishTime = Date.parse(item.downTime)
				var nowTime = Date.parse(Date())
				var subTime = finishTime - nowTime
				if (subTime <= 0) {
					that.time = '已结束'
					clearInterval(that.timer)
				}else{
					var day = that.$util.formatNumber(Math.floor(subTime / (1000 * 60 * 60 * 24)))
					var hour = that.$util.formatNumber(Math.floor((subTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)))
					var minute = Math.floor((subTime % (1000 * 60 * 60)) / (1000 * 60))
					var second = Math.floor((subTime % (1000 * 60)) / 1000)
					that.time = day + '日' + that.$util.formatNumber(hour) + '时' + that.$util.formatNumber(minute) + '分' + that.$util.formatNumber(second) + '秒';
				}
			},
			merchant: function(){
				// uni.navigateTo({
				// 	url: '../merchant/merchant'
				// })
			},
			goBack: function() {
				if (getCurrentPages().length > 1) {
					uni.navigateBack({
						
					})
				}else{
					uni.reLaunch({
						url: 'index'
					})
				}
			},
			goMain: function() {
				if (getCurrentPages().length > 1) {
					uni.navigateBack({
						delta: 999
					})
				}else{
					uni.reLaunch({
						url: 'index'
					})
				}
			},
			merPhone: function() {
				var that = this
				uni.makePhoneCall({
					phoneNumber: that.data.merMerchant.phone
				})
			},
			merAddress: function() {
				var that = this
				const latitude = parseFloat(that.data.merMerchant.lat);
				const longitude = parseFloat(that.data.merMerchant.lng);
				uni.openLocation({
				    latitude: latitude,
				    longitude: longitude,
				    success: function () {
				        console.log('success');
				    }
				});
			},
			confirm: function() {
				if (!this.isLogin()) {
					this.reg("getPhoneNumber")
					return
				}
				
				if (!this.userInfo.phone) {
					this.getPhoneNumber()
					return false
				}
				
				if (this.time == '已结束') {
					uni.showModal({
						content: '该商品已结束售卖',
						showCancel: false
					});
					return
				}
				
				if (this.data.number <= 0) {
					uni.showModal({
						content: '该商品已售罄',
						showCancel: false
					});
					return
				}
				
				uni.setStorageSync("selectedProduct", this.data)
				uni.navigateTo({
					url: '../order/submit'
				})
			},
			share: function() {
				
				if (this.data && this.data.billPic && this.data.billPic.length) {
					
				}else{
					uni.showModal({
						content: '该商品未设置分享海报',
						showCancel: false
					});
				}
				this.getShareImageUrl()
				this.$refs.popUp.open()
			},
			popUpChanged: function(e) {
				console.log(e.show)
			},
			saveImage: function() {
				var that = this
				
				var filePath = wx.env.USER_DATA_PATH + '/tmpFile.png'
				uni.showLoading()
				uni.downloadFile({
					url: that.shareImageUrl,
					header: {
						'Content-Type': 'application/jpeg'
					},
					filePath: filePath,
					success: function(res) {
						console.log(res)
						uni.saveImageToPhotosAlbum({
							filePath: filePath,
							success() {
								uni.showModal({
									content: '海报已保存到您的相册',
									showCancel: false
								});
							},
							complete() {
								uni.hideLoading()
							}
						})
					},
					fail: function() {
						uni.hideLoading()
					}
				})
			},
			formatHtml: function(chtml) {
				var htmlStr = chtml.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
				var htmlStr = htmlStr.replace(/\<video/gi, '<img style="max-width:100%;height:auto;display:block;"')
				// var htmlStr = htmlStr.replace(/\<span/gi, '<span style="max-width:100%;height:auto;display:block;"')
				
				return htmlStr
			},

		},
		onShareAppMessage() {
			var that = this
			return {
				title: that.data.name,
				path: '/pages/index/detail?pid=' + that.shareProductId + (that.userInfo?('&uid=' + that.userInfo.id):''),
				imageUrl: that.data.pic,
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
	
	.wxParse .text-only {
		display: block!important;
	}
	
	.wxParse .text-only weixin-parse-template {
		white-space: pre-line!important;
	}

	/* 轮播图 */
	.images-view {
		width: 100%;
		height: 600upx;
		background-color: white;
	}

	.swiper-item {
		width: 100%;
		height: 600upx;
		background-color: #F1F1F1;
		/* margin: 1upx; */
		/* border-radius: 20upx; */
	}

	/* 商品简介 */
	.product-info-view {
		background-color: white;
		position: relative;
		border-top: 1upx solid #FFFFFF;
	}

	.price-view {
		width: 700upx;
		height: 55upx;
		margin: 10upx 25upx 10upx;
	}

	.price-icon {
		height: 55upx;
		line-height: 55upx;
		color: #d8622c;
		font-size: 28upx;
		float: left;
		position: relative;
		top: 8upx;
	}

	.price-text {
		height: 55upx;
		line-height: 55upx;
		color: #d8622c;
		font-size: 52upx;
		float: left;
	}

	.price-brokerage {
		padding: 2upx 10upx 2upx;
		background-color: #ec6e2d;
		float: left;
		height: 30upx;
		line-height: 30upx;
		border-radius: 6upx;
		color: #FFFFFF;
		font-size: 20upx;
		margin-top: 12upx;
		margin-left: 20upx;
	}

	.price-original {
		width: 690upx;
		margin: 0upx 30upx 0upx;
		height: 30upx;
		line-height: 30upx;
		color: #bbbbbb;
		font-size: 20upx;
		text-decoration: line-through;
	}

	.sell-number {
		color: #bbbbbb;
		font-size: 20upx;
		position: absolute;
		right: 30upx;
		top: 40upx;
	}

	.product-intro-view {
		width: 690upx;
		padding: 30upx;
	}

	.intro-image {
		width: 36upx;
		height: 36upx;
		position: relative;
		top: 4upx;
	}

	.intro-text {
		font-size: 34upx;
		margin-left: 10upx;
		color: #333333;
	}

	/* 使用须知 */
	.use-notice-view {
		margin-top: 20upx;
		border-top: 1upx solid #FFFFFF;
		background-color: #FFFFFF;
		padding: 30upx;
	}

	.use-notice-title {
		width: 690upx;
		font-size: 34upx;
		height: 35upx;
		line-height: 35upx;
		margin-bottom: 20upx;
		color: #333333;
	}

	.use-notice-rich-text {
		width: 690upx;
	}

	/* 商户信息 */
	.mer-info-view {
		width: 690upx;
		height: 146upx;
		margin-top: 30upx;
	}

	.mer-info-image {
		width: 146upx;
		height: 146upx;
		border-radius: 15upx;
		overflow: hidden;
		float: left;
	}

	.mer-info-text-view {
		width: 400upx;
		height: 146upx;
		float: left;
		margin-left: 24upx;
	}

	.mer-name {
		width: 100%;
		height: 45upx;
		line-height: 45upx;
		color: #333333;
		font-size: 32upx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}

	.mer-info-info {
		width: 100%;
		height: 65upx;
		line-height: 65upx;
		font-size: 24upx;
		color: #666666;
	}

	.mer-info-star-image {
		width: 27upx;
		height: 27upx;
		float: left;
		margin-top: 17upx;
	}

	.mer-info-star-text {
		float: left;
		color: #f1a441;
		font-size: 24upx;
		margin-left: 5upx;
	}

	.mer-info-consume {
		float: left;
		margin-left: 10upx;
	}

	.mer-info-type {
		float: left;
		margin-left: 10upx;
	}

	.mer-info-type2 {
		float: left;
		margin-left: 10upx;
	}

	.mer-info-icon {
		width: 36upx;
		height: 36upx;
	}

	.mer-phone-view {
		width: 120upx;
		height: 145upx;
		float: right;
		padding-top: 1upx;
	}

	.mer-phone-content {
		margin-top: 45upx;
		width: 120upx;
		height: 55upx;
		border-left: 2upx dashed #999999;
	}

	.mer-phone-title {
		color: #f1a441;
		font-size: 20upx;
		width: 50upx;
		height: 55upx;
		overflow: hidden;
		float: right;
	}

	.mer-phone-image {
		width: 45upx;
		height: 45upx;
		margin: 5upx 8upx;
		float: right;
	}

	.mer-address {
		width: 100%;
		/* height: 40upx; */
		position: relative;
		top: 10upx;
		/* white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all; */
	}

	.mer-address-image {
		width: 25upx;
		height: 25upx;
		position: relative;
		top: 5upx;
	}

	.mer-address-text {
		height: 40upx;
		line-height: 40upx;
		font-size: 25upx;
		color: #666666;
	}


	/* 占位 */
	.placeholder-view {
		width: 100%;
		height: 120upx;
		margin-top: 20upx;
	}

	/* 底部view */
	.footer-view {
		width: 100%;
		height: 120upx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		box-shadow: 0 -20px 50px rgba(200, 200, 200, .3);
	}

	.footer-share-view {
		width: 270upx;
		height: 90upx;
		margin: 15upx 30rpx;
		background-color: #261c19;
		float: left;
		border-radius: 20rpx;
	}
	
	.footer-share-text {
		height: 45upx;
		line-height: 45upx;
		margin-top: 18rpx;
		width: 100%;
		text-align: center;
		color: white;
		vertical-align: text-bottom;
	}

	.footer-confirm-button {
		width: 390upx;
		height: 90upx;
		margin: 15upx 30upx 15rpx 0; 
		background-color: #dc0907;
		float: right;
		border-radius: 20rpx;
	}
	
	.footer-confirm-text {
		height: 45upx;
		line-height: 45upx;
		margin-top: 22rpx;
		width: 100%;
		text-align: center;
		color: white;
		vertical-align: text-bottom;
	}

	/* #ifdef MP-WEIXIN */
	.navBar {
		width: 85px;
		height: 30px;
		border-radius: 15px;
		background-color: rgba(255, 255, 255, 0.7);
		position: fixed;
		/* background-color: red; */
		margin: 7px;
		overflow: hidden;
	}

	.navBar-back {
		width: 16px;
		height: 16px;
		margin: 7px 13px;
	}

	.navBar-line {
		display: inline-block;
		width: 1px;
		height: 16px;
		background-color: #999999;
		margin: 7px 0;
	}

	.navBar-main {
		width: 16px;
		height: 16px;
		margin: 7px 13px;
	}

	/* #endif */
	/* #ifdef H5 */
	.goMain {
		width: 120upx;
		height: 120upx;
		border-radius: 60upx;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.4);
		right: 0;
		bottom: 200upx;
	}

	.goMain-image {
		width: 45upx;
		height: 45upx;
		margin: 20upx 38upx 0;
	}

	.goMain-title {
		width: 120upx;
		height: 20upx;
		line-height: 20upx;
		font-size: 22upx;
		color: #FFFFFF;
		text-align: center;
	}

	/* #endif */


	/* #ifdef MP-WEIXIN */
	/* 弹出层 */
	.popUp-title-view {
		width: 600upx;
		height: 80upx;
		font-size: 30upx;
		color: #FFFFFF;

		//两行
		overflow: hidden;
		text-overflow: -o-ellipsis-lastline;
		text-overflow: clip;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.popUp-image-view {
		width: 500upx;
		height: 890upx;
		margin-top: 20upx;
		background: url(../../static/loading.gif) no-repeat center;
		position: relative;
		background-size: 150rpx 150rpx;
	}

	.popUp-button-view {
		width: 500upx;
		height: 180upx;
		/* margin-left: 50upx; */
	}

	.popUp-button-view-item {
		width: 200upx;
		height: 180upx;
	}

	.popUp-button-view-item-image {
		width: 100upx;
		height: 100upx;
		margin-top: 20upx;
	}

	.popUp-button-view-item-title {
		width: 200upx;
		height: 50upx;
		line-height: 50upx;
		font-size: 28upx;
		color: white;
	}

	button {
		border-radius: 0;
		padding-left: 0;
		padding-right: 0;
	}

	button.popUp-button-view-item {
		background-color: rgba(0, 0, 0, 0);
		line-height: 40upx;
		position: relative;
		margin: 0;
	}

	button::after {
		border: 0upx;
	}

	/* #endif */
	/* #ifdef H5 */
	/* 弹出层 */
	.popUp-title-view {
		width: 460upx;
		height: 80upx;
		font-size: 30upx;
		color: #FFFFFF;

		//两行
		overflow: hidden;
		text-overflow: -o-ellipsis-lastline;
		text-overflow: clip;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.popUp-image-view {
		width: 420upx;
		height: 747upx;
		margin-top: 20upx;
	}

	.popUp-button-view {
		width: 360upx;
		height: 70upx;
		/* margin-left: 55upx; */
		margin-top: 15upx;
		/* background-color: red; */
	}

	.popUp-button-view-item-image {
		width: 70upx;
		height: 70upx;
		float: left;
	}

	.popUp-button-view-item-title {
		display: inline-block;
		height: 70upx;
		line-height: 70upx;
		float: right;
		color: #FFFFFF;
		font-size: 30upx;
	}

	.share-image-tips {
		width: 275upx;
		height: 81upx;
		position: fixed;
		top: 0;
		right: 50upx;
	}

	/* #endif */
</style>
